<template>
  <div :data-title="title" class="me-view-body" v-title>
    <el-container class="me-view-container">
      <!--<el-aside class="me-area">-->
      <!--<ul class="me-operation-list">-->
      <!--<li class="me-operation-item">-->
      <!--<el-button type="primary" icon="el-icon-edit"></el-button>-->
      <!--</li>-->
      <!--</ul>-->
      <!--</el-aside>-->
      <el-main>
        <div class="me-view-card">
          <h1 class="me-view-title">{{article.artName}}</h1>
          <div class="me-view-author">
            <a class>
              <img :src="article.author.avatar" class="me-view-picture" />
            </a>
            <div class="me-view-info">
              <span>{{article.author.nickName}}</span>
              <div class="me-view-meta">
                <span>{{article.createTime | format}}</span>
                <span>阅读 {{article.scan}}</span>
                <span>评论 {{article.comments}}</span>
              </div>
            </div>
            <el-button
              @click="editArticle()"
              class="me-view-cate-tag-item"
              icon="el-icon-edit"
              round
              size="mini"
              style="position: absolute;left: 55%;"
              type="success"
              v-if="this.article.author.userId == this.$store.state.id"
            >编辑</el-button>
          </div>
          <div class="me-view-content">
            <markdown-editor :editor="article.editor" class="article-view-editor"></markdown-editor>
          </div>

          <div class="me-view-end">
            <el-alert :closable="false" center title="文章End..." type="success"></el-alert>
          </div>

          <div class="me-view-tag">
            标签：
            <!--<el-tag v-for="t in article.tags" :key="t.id" class="me-view-tag-item" size="mini" type="success">{{t.tagname}}</el-tag>-->
            <el-button
              :key="t.id"
              @click="tagOrCategory('tag', t.tagId)"
              class="me-view-cate-tag-item"
              plain
              round
              size="mini"
              type="primary"
              v-for="t in article.tags"
            >{{t.tagName}}</el-button>
          </div>

          <div class="me-view-tag">
            文章分类：
            <!--<span style="font-weight: 600">{{article.category.categoryname}}</span>-->
            <el-button
              @click="tagOrCategory('category', article.category.id)"
              class="me-view-cate-tag-item"
              plain
              round
              size="mini"
              type="primary"
            >{{article.category.categoryName}}</el-button>
          </div>

          <div class="me-view-comment">
            <div class="me-view-comment-write">
              <el-row :gutter="20">
                <el-col :span="2">
                  <a class>
                    <img :src="avatar" class="me-view-picture" />
                  </a>
                </el-col>
                <el-col :span="21">
                  <el-input
                    :autosize="{ minRows: 2}"
                    class="me-view-comment-text"
                    placeholder="你的评论..."
                    resize="none"
                    type="textarea"
                    v-model="comment.content"
                  ></el-input>
                </el-col>
              </el-row>

              <el-row :gutter="20">
                <el-col :offset="21" :span="3">
                  <el-button @click="publishComment()" style="margin-top: 5px;" type="text">评论</el-button>
                </el-col>
              </el-row>
            </div>

            <div class="me-view-comment-title">
              <span>{{article.commentNum}} 条评论</span>
            </div>

            <commment-item
              :articleId="article.id"
              :comment="c"
              :index="index"
              :key="c.commentId"
              :rootCommentCounts="comments.length"
              @commentCountsIncrement="commentCountsIncrement"
              v-for="(c,index) in comments"
            ></commment-item>
          </div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import markdownEditor from '@/components/markdown/markdownEditor'
import CommmentItem from '@/components/comment/CommentItem'
import { viewArticle } from '@/api/article'
import { getCommentsByArticle, publishComment } from '@/api/comment'

import defaultAvatar from '@/assets/img/default_avatar.png'

export default {
  name: 'BlogView',
  watch: {
    $route: 'getArticle'
  },
  data () {
    return {
      article: {
        id: '',
        artName: '',
        comment_num: 0,
        scan: 0,
        summary: '',
        createTime: '',
        author: {},
        tags: [],
        category: {},
        editor: {
          value: '',
          toolbarsFlag: false,
          subfield: false,
          defaultOpen: 'preview'
        }
      },
      comments: [],
      comment: {
        article: {},
        content: ''
      }
    }
  },
  components: {
    'markdown-editor': markdownEditor,
    CommmentItem
  },
  computed: {
    avatar () {
      let avatar = this.$store.state.avatar
      if (avatar && avatar.length > 0) {
        return avatar
      }
      return defaultAvatar
    },
    title () {
      return `${this.article.artName} - 文章 - MBlog`
    }
  },
  created () {
    this.getArticle()
  },
  methods: {
    tagOrCategory (type, id) {
      this.$router.push({ name: `articleBy${type}`, params: {id} })
    },
    editArticle () {
      let id = this.article.id
      this.$router.push({ name: `blogEdit`, params: {id} })
    },
    getArticle () {
      let that = this
      viewArticle(that.$route.params.id)
        .then(data => {
          Object.assign(that.article, data.data)
          that.article.editor.value = data.data.content
          that.getCommentsByArticle()
        })
        .catch(error => {
          if (error !== 'error') {
            that.$message({
              type: 'error',
              message: '文章加载失败',
              showClose: true
            })
          }
        })
    },
    publishComment () {
      let that = this
      if (!that.comment.content) {
        return
      }
      that.comment.article.id = that.article.id

      publishComment(that.comment)
        .then(data => {
          that.$message({
            type: 'success',
            message: '评论成功',
            showClose: true
          })
          that.comments.unshift(data.data)
          that.commentCountsIncrement()
          that.comment.content = ''
        })
        .catch(error => {
          if (error !== 'error') {
            that.$message({
              type: 'error',
              message: '评论失败',
              showClose: true
            })
          }
        })
    },
    getCommentsByArticle () {
      let that = this
      getCommentsByArticle(that.article.id)
        .then(data => {
          that.comments = data.data
        })
        .catch(error => {
          if (error !== 'error') {
            that.$message({
              type: 'error',
              message: '评论加载失败',
              showClose: true
            })
          }
        })
    },
    commentCountsIncrement () {
      this.article.commentCounts += 1
    }
  }
  // // 组件内的守卫 调整body的背景色
  // beforeRouteEnter (to, from, next) {
  //   window.document.body.style.backgroundColor = '#fff'
  //   next()
  // },
  // beforeRouteLeave (to, from, next) {
  //   window.document.body.style.backgroundColor = '#f5f5f5'
  //   next()
  // }
}
</script>

<style>
.me-view-body {
  margin: 10px auto 140px;
}

.me-view-container {
  width: 700px;
}

.el-main {
  /* background-color: #fff; */
  overflow: hidden;
}

.me-view-title {
  font-size: 34px;
  font-weight: 700;
  line-height: 1.3;
}

.me-view-author {
  /*margin: 30px 0;*/
  margin-top: 30px;
  vertical-align: middle;
}

.me-view-picture {
  width: 40px;
  height: 40px;
  border: 1px solid #ddd;
  border-radius: 50%;
  vertical-align: middle;
  background-color: #5fb878;
}

.me-view-info {
  display: inline-block;
  vertical-align: middle;
  margin-left: 8px;
}

.me-view-meta {
  font-size: 12px;
  color: #969696;
}

.me-view-end {
  margin-top: 20px;
  padding-right: 25px;
}

.me-view-tag {
  margin-top: 20px;
  padding-left: 6px;
  border-left: 4px solid #c5cac3;
}

.me-view-cate-tag-item {
  padding: 1px 15px !important;
  margin: 0 4px;
}

.me-view-comment {
  margin-top: 60px;
}

.me-view-comment-title {
  font-weight: 600;
  border-bottom: 1px solid #f0f0f0;
  padding-bottom: 20px;
}

.me-view-comment-write {
  margin-top: 20px;
}

.me-view-comment-text {
  font-size: 16px;
}

.v-show-content {
  padding: 8px 25px 15px 0px !important;
}

.v-note-wrapper .v-note-panel {
  box-shadow: none !important;
}

.v-note-wrapper .v-note-panel .v-note-show .v-show-content,
.v-note-wrapper .v-note-panel .v-note-show .v-show-content-html {
  background: #fff !important;
}
.me-view-content {
  text-align: center;
}
.article-view-editor {
  box-shadow: none !important;
}
</style>
